import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet,
} from 'react-native';

interface Props {
    data:any
}

import {
    Press,
    Dialog,
    FastImage
} from './../../components';

import * as Const from './../../const';
import Swipe from 'react-native-swiper';
import parseUrl from "../../utils/parseUrl";
import MoreBox from './../home/components/more';
import report_icon from './../../images/profile/report.png';

import gold_icon from './../../images/vip_icon.png';
import verify_icon from './../../images/verified_samll.png';


class Header extends PureComponent<Props> {
    static defaultProps = {
        data:{}
    }

    get Data() {
        return this.props.data;
    }

    get aboutMe() {
        const {
            aboutme
        } = this.Data;
        return aboutme;
    }

    get userId() {
        const {
            userId
        } = this.Data;
        return userId;
    }

    get age() {
        const {
            age = 18
        } = this.Data;
        return age;
    }

    get photoVerify() {
        const {
            photoVerify = 0
        } = this.Data;
        return photoVerify === 1;
    }

    get photos(): Array<any> {
        const {
            photos = []
        } = this.Data;
        return photos;
    }

    get nickName() {
        const {
            userName
        } = this.Data;
        return userName;
    }

    get isGuest() {
        const {
            isGuest = true
        } = this.Data;
        return isGuest;
    }

    private renderImage = (
        item:any,i:number
    ) => {
        return (
            <View key={i} style={styles.imageItem}>
                <FastImage
                    opacity={.3}
                    style={styles.imageItem}
                    url={parseUrl(item.url,true)}
                />
            </View>
        )
    }

    private openMore = () => {
        const content = (
            <MoreBox userId={this.userId} />
        )
        Dialog.show(content,{
            clickClose:true,
            direction:`bottom`
        })
    }

    render() {
        return (
            <View style={styles.header}>
                <View style={styles.headerContent}>
                    <Swipe>
                        {this.photos.map(this.renderImage)}
                    </Swipe>
                </View>
                <View style={styles.contentStyle}>
                    <View style={styles.userMain}>
                        <Text style={styles.userName}>
                            {this.nickName},{this.age}
                        </Text>
                        <View style={styles.icons}>
                            {!this.isGuest && (
                                <View style={styles.imageStyle}>
                                    <Image
                                        source={gold_icon}
                                        style={styles.iconStyle}
                                    />
                                </View>
                            )}
                            {this.photoVerify && (
                                <View style={styles.imageStyle}>
                                    <Image
                                        source={verify_icon}
                                        style={styles.iconStyle}
                                    />
                                </View>
                            )}
                        </View>
                    </View>
                    <Press
                        source={report_icon}
                        onPress={this.openMore}
                    />
                </View>
            </View>
        )
    }
}

export default Header;

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    headerContent: {
        height:375
    },
    imageItem:{
        flex:1
    },
    contentStyle:{
        alignItems:`center`,
        paddingVertical:16,
        paddingHorizontal:16,
        flexDirection:`row`,
        justifyContent:`space-between`
    },
    userName:{
        fontSize:18,
        color:Const.color,
        fontWeight:`bold`
    },
    icons:{
        height:28,
        paddingLeft:4,
        alignItems:`center`,
        flexDirection:`row`
    },
    imageStyle:{
        width:28,
        height:26,
        alignItems:`center`,
        justifyContent:`center`
    },
    iconStyle:{
        marginTop:7
    },
    userMain:{
        alignItems:`center`,
        flexDirection:`row`
    }
}) as any;